import {FC} from 'react'
import {Item} from './index'
import './todoList.css'
// 声明props类型
type Iprops = {
    data:Array<Item> | undefined
    onDel(id:string):void
    onCheckIn(checked:boolean,id:string):void
}
const Todolist:FC<Iprops> = (props) => {
    // 解构传递下来的数据
    let {data,onDel,onCheckIn} = props

    // checkbox勾选变化
    let handleCheckboxChange = (e:any,id:string) => {
        // console.log(e.target.checked);
        onCheckIn(e.target.checked,id)
    }
    // 创建列表数据
    let lis = data!.map((item:Item) => {
        return(
            <li key={item.id} className={item.completed?'completed':''}>
                <input type="checkbox" checked={item.completed} onChange={(e:any)=>{
                    handleCheckboxChange(e,item.id)
                }}/>
                &nbsp;
                ————————
                &nbsp;
                <b>{item.todo}</b>
                &nbsp;
                ————————
                &nbsp;
                <button onClick={()=>{
                    onDel(item.id)
                }}>删除</button>
            </li>
        )
    })
    return(
        <fieldset>
            <legend>列表</legend>
            <ul>
                {lis}
            </ul>
        </fieldset>
    )
}
export default Todolist